<template>
  <div>
    <span v-if="loaded" id="slider" :style="{top : sliderTop, left : sliderLeft}">
    </span>
    <ul class="switch">
      <depart-button @click.native="menuSwitch(index,dp)" v-for="(dp,index) in departs" :depart-name="dp.departmentName"
                     :index="index">

      </depart-button>
    </ul>
  </div>
</template>

<script>

  import DepartButton from "./module/departButton";
  import Bus from 'bus'
  import Cookie from 'js-cookie'
  export default {
    name: "departSwitch",
    components: {DepartButton},
    data() {
      return {
        departs: '',
        currentDepartIndex : 0,
        loaded : false,
        currentDepartId: 0
      }
    },
    computed: {
      sliderTop() {
        return '-34px'
      },
      sliderLeft() {
        return ($('#app > div > div.ivu-layout-content > div:nth-child(1) > div > ul > li:nth-child('+ (this.currentDepartIndex + 1 ) +')').position().left + 100) + 'px'
      }
    },
    methods: {
      loadDeparts() {
        this.$http.get("/getDepartments.form").then((response) => {
          this.departs = response.data;
          this.getDepartId();
          this.defaultUrl(this.currentDepartId);
          setTimeout(()=> {
            this.loaded = true;
          },1000)
        });
      },
      menuSwitch(index, dp) {
        this.currentDepartIndex = index;
        Bus.$emit('changeURL',dp.departmentName);
      },
      getDepartId(){
        this.currentDepartId = Cookie.get('departId');
        console.log(this.currentDepartId)
      },
      defaultUrl(index) {
        var depart = this.departs[index];
        console.log('depart'+depart.departmentName);
        //Bus.$emit('changeURL', depart.departmentName)
        var collections = document.getElementsByTagName("depart-button");
        console.log(collections)
      }
    },
    mounted() {
      this.loadDeparts();
    }
  }
</script>

<style scoped>
  .switch {
    list-style: none;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }

  #slider {
    position: absolute;
    width: 180px;
    height: 135px;
    background: #0d71bb;
    border-radius: 10px;
    /*transform: translate(194%, -26%);*/
    transition: all 1s;
  }
</style>
